<script setup>
const props = defineProps({
  avatarUrl: {
    type: String,
    required: true, // 用户头像 URL
  },
  name: {
    type: String,
    required: true, // 用户姓名
  },
  bio: {
    type: String,
    default: '', // 用户简介
  },
  socialLinks: {
    type: Array,
    default: () => [], // 社交链接
  },
});
</script>

<template>
  <div class="card-profile">
    <div class="avatar">
      <img :src="props.avatarUrl" alt="Avatar" />
    </div>
    <div class="content">
      <h3>{{ props.name }}</h3>
      <p>{{ props.bio }}</p>
      <div class="social-links">
        <a
            v-for="(link, index) in props.socialLinks"
            :key="index"
            :href="link.url"
            target="_blank"
        >
          <i :class="link.icon"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card-profile {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex: 1;
}

.card-profile:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #007bff;
  object-fit: cover;
}

.content h3 {
  margin: 10px 0 5px;
  font-size: 20px;
  color: #333;
}

.content p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.social-links {
  margin-top: 10px;
}

.social-links a {
  margin: 0 5px;
  font-size: 18px;
  color: #007bff;
  text-decoration: none;
}

.social-links a:hover {
  color: #0056b3;
}
</style>